<template>
	<view v-if="info.id" class="page">
		<u-swiper :list="info.images" height="500"></u-swiper>
		<view class="u-padding-30" style="border-radius: 100rpx 100rpx 0 0;padding-top: 100rpx;">
			<view class="u-font-weight u-font-lg">{{info.goodsName}}</view>
			<view class="u-flex u-row-between u-margin-top-20">
				<view class="u-flex">
					<view class="tag">{{info.groupNum}}人团</view>
					<view style="color: #FF5D39;font-size: 38rpx;" class="u-font-weight u-margin-left-80">
						￥{{info.price}}</view>
				</view>
				<view class="$u-type-info u-th-line">
					￥{{info.linePrice}}
				</view>
			</view>


			<view class="u-flex u-row-between " style="align-items: center;">
				<view class="$u-type-info u-margin-top-20 u-font-sm ">
					<text  class="u-margin-right-30">已售{{info.total}}件</text><text>仅剩{{info.sku}}件</text>
				</view>
			
				<view v-if="info.endTime">
					<view class="" style="color: #AC4C0A;font-size: 24rpx;margin: 20rpx 0;">
						<u-icon name="clock-fill" color="#AC4C0A" size="24"></u-icon>
						<text  style="margin: 0 10rpx;font-weight: bold;">倒计时</text>
						<u-count-down separator-size="24" separator-color="#fff" color="#fff" bg-color="#F09820" font-size='24':timestamp="timestamp"></u-count-down>
					</view>
				</view>
						
			</view>
			
					
			
				
					
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<view v-if="info.groupBuy.length">

			<view class="u-text-center u-font-weight u-font-lg u-margin-top-20">拼团进度</view>
			<view class="u-text-center u-margin-top-20 $u-type-info">
				<text>{{groupNum}}人已拼团</text>
				<text style="margin-left: 10rpx;">距离拼团成功 <text
						style="color: #007AFF;">还差{{info.groupNum - groupNum}}人</text> </text>
			</view>

			<view class="u-flex u-padding-20 u-row-around">
				<view v-for="(item,index) in info.groupBuy" :key="index" style="position: relative;text-align: center">
					<image :src="item.headimg"
						style="; border-radius: 100rpx; display: block;margin: auto;width: 80rpx;height: 80rpx;">
					</image>
					<view>{{item.nickname}}</view>
					<u-button class="custom-btn" open-type="share" v-if="!item.id"></u-button>
				</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>

		<view class="u-padding-30">
			<view class="u-text-center u-font-lg u-font-weight">产品参数</view>
			<view class="text" v-for="(item,index) in info.param" :key="index">
				<view class="left">{{item.name}}</view>
				<view class="right">{{item.value}}</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>

		<view class="u-margin-top-20">
			<view class="u-text-center u-font-lg u-font-weight">商品详情</view>
			<view class="u-padding-20">
				<u-parse :html="info.detail"></u-parse>
			</view>
		</view>






		<view class="bottom u-flex">
			<view class="u-flex u-flex-1 u-row-around u-text-center">
				<view class="u-flex-1 " style="position: relative;">
					<u-icon name="share" size="40"></u-icon>
					<view style="font-size: 24rpx;">分享</view>
					<button open-type="share" class="custom-btn"></button>
				</view>
			</view>
			<view class="u-flex-2 u-text-center u-flex" @click="buy">
				<view class="btn u-flex-1 red">立即参团</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {

		data() {
			return {
				info: {},
				id: "",
				groupNum: '',
				timestamp:''
			}
		},
		onReady() {},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}

		},
		onShow() {
			this.jiazai()
		},
		methods: {
			jiazai() {
				this.$u.post('/index/goodsDetail', {
					goods_id: this.id
				}).then(res => {
					uni.setNavigationBarTitle({
						title: res.goodsName
					})
					
					
					let endTime = res.endTime/1000;
					this.timestamp=endTime;
					
					this.info = res;

					this.groupNum = res.groupBuy.length;
					this.check(res)

				}).catch(err => {

				})
			},
			check(res) {
				var arr = res.groupBuy;
				var num = res.groupNum - res.groupBuy.length;

				for (var i = 0; i < num; i++) {
					arr.push({
						nickname: "虚位以待",
						headimg: "/static/emty_set.png",
					})
				}

				this.info.groupBuy = arr
			},
			buy() {
				uni.navigateTo({
					url: "/pages/sure_book/index?id=" + this.info.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		padding-bottom: 100rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		border-top: 1rpx solid #F1F1F1;
		background: #FFFFFF;

		.btn {

			color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 40rpx;

			&.blue {
				background: #818DFF;
			}

			&.red {
				background: #FF5D39;
			}
		}
	}

	.text {
		display: flex;
		padding: 10rpx 0;

		.left {
			width: 200rpx;
			color: #C2C2C2
		}

		.right {
			font-weight: bold;
		}
	}

	.tag {
		position: absolute;
		left: 0;
		padding: 7rpx 15rpx;
		border-radius: 0 20rpx 20rpx 0;
		color: #fff;
		background: #FF5D39;
	}
</style>
